<template>
    <el-card>
        <!-- 搜索区 -->
        <el-form inline>
            <el-form-item size="medium">
                <el-input v-model="inputRoleName" placeholder="角色名称" size="medium"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="medium" icon="el-icon-search" @click="searchRole">查询</el-button>
                <el-button size="medium" @click="restBotton">清空</el-button>
            </el-form-item>
        </el-form>

        <!-- 按钮区 -->
        <el-button type="primary" size="medium" @click="addRole">添加</el-button>
        <el-button type="danger" size="medium" :disabled="!deleteRoleList.length" @click="deleteAllRole">批量删除</el-button>

        <!-- 表格区 -->
        <el-table border :data="pageList" class="mt-20" size="medium" @selection-change="selectionHandler">
            <el-table-column type="selection" width="55px"></el-table-column>
            <el-table-column type="index" width="80px" label="序号" align="center"></el-table-column>
            <el-table-column label="角色名称">
                <template #default="{ $index, row }">
                    <div v-if="row.showInput">
                        <el-input class="mb-5" v-model="row.roleName" size="mini"></el-input>
                        <el-button type="warning" size="mini" @click="cancelEdit(row)" icon="el-icon-refresh">取消</el-button>
                    </div>
                    <div v-else>{{ row.roleName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300px">
                <template #default="{ $index, row }">
                    <el-button title="分配权限" class="mr-10" type="info" size="mini" @click="toAuth(row)"
                        icon="el-icon-info"></el-button>
                    <el-button title="确定" class="mr-10" type="primary" size="mini" @click="updateRole(row)"
                        icon="el-icon-check"></el-button>
                    <el-button title="修改角色" class="mr-10" type="primary" size="mini" @click="editRole(row)"
                        icon="el-icon-edit-outline"></el-button>
                    <el-button title="删除角色" type="danger" size="mini" icon="el-icon-delete"
                        @click="deleteRole(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[5, 10, 20, 30]" :page-size="limit" layout=" prev, pager, next, jumper,->,sizes,total"
            :total="total" class="mt-20">
        </el-pagination>

    </el-card>
</template>

<script>
import roleApi from '@/api/acl/role';
export default {
    name: "VRole",
    data() {
        return {
            inputRoleName: '',  //input 的角色名称
            searchRoleName: '',  //搜索的角色名称
            page: 1,     // 当前第几页
            limit: 5,    //每页几个
            total: 0,  //总共多少条
            pageList: [],  //初始化列表
            deleteRoleList: []   //需要批量删除的角色
        }
    },
    methods: {
        //分配权限
        toAuth(row) {
            this.$router.push({
                path: '/acl/role/auth',
                query: {
                    id: row.id,
                    roleName: row.roleName
                }
            })
        },
        //删除角色
        async deleteRole(row) {
            this.$confirm('此操作将永久删除角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await roleApi.removeById(row.id)
                this.getPage()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '已取消删除'
                });
            });
        },
        //取消编辑
        cancelEdit(row) {
            this.$set(row, 'showInput', false)
            this.$message.warning('取消编辑')
        },
        //编辑
        editRole(row) {
            //给当前这行数据添加一个响应式属性
            this.$set(row, 'showInput', true)
        },
        //更新
        async updateRole(row) {
            await roleApi.updateById(row)
            this.getPage()
            this.$message.success('更新成功')
        },
        //点击表格的回调
        selectionHandler(list) {
            this.deleteRoleList = list
        },
        //批量删除角色
        deleteAllRole() {
            //调弹框
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //组织参数
                const ids = this.deleteRoleList.map(item => item.id)
                //发请求删除
                await roleApi.removeRoles(ids)
                this.getPage()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //搜索按钮
        searchRole() {
            this.searchRoleName = this.inputRoleName
            this.getPage()
        },
        //清空按钮
        restBotton() {
            this.inputRoleName = ''
            this.searchRoleName = ''
            this.getPage()
        },
        //新增角色
        addRole() {
            this.$prompt('添加角色', '请输入新名称', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(async ({ value }) => {
                await roleApi.save({ roleName: value })
                this.getPage()
                this.$message({
                    type: 'success',
                    message: '添加成功'
                });
            })
                .catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '取消输入'
                    });
                });
        },
        //每页几个变化回调
        handleSizeChange(val) {
            this.limit = val
            this.getPage()
        },
        //当前第几页回调
        handleCurrentChange(val) {
            this.page = val
            this.getPage()
        },
        //初始化数据
        async getPage() {
            let res = await roleApi.getPageList(this.page, this.limit, { roleName: this.searchRoleName })
            this.total = res.data.total
            this.pageList = res.data.items
        }
    },
    mounted() {
        this.getPage()
    },
}
</script>

<style lang="less" scoped></style>